<!--
 * @Author: your name
 * @Date: 2021-02-08 16:06:04
 * @LastEditTime: 2021-03-24 16:15:38
 * @LastEditors: Please set LastEditors
 * @Description: 目录条列
 * @FilePath: \jf-h5\src\page\main\components\Line\index.vue
-->
<template>
    <div
        :class="[
            'line-text',
            size === 'small' ? 'small' : 'big',
            addClass ? 'click-class' : '',
        ]"
        @touchstart="touchstart"
        @touchend="touchend"
        @touchmove="touchMove"
    >
        <slot></slot>
    </div>
</template>
<script>
export default {
    props: {
        size: {
            type: String,
            default: "small",
            flag: false
        },
    },
    data() {
        return {
            addClass: false
        };
    },
    methods: {
        touchstart() {
            this.flag = true
            this.addClass = true
        },
        touchend() {
            setTimeout(() => {
                this.addClass = false
                if (this.flag) {
                    setTimeout(() => this.$emit('click'), 100)
                }
            }, 200)

        },
        touchMove(e) {
            setTimeout(() => {
                this.flag = false
                this.addClass = false
            }, 200)
        },
    }
};
</script>
<style lang='scss' scoped>
.line-text {
    box-shadow: 0 10px 10px #474446;
    background: linear-gradient(to bottom, #add0e8, #fff, #aacee4);
    font-size: 29px;
    // letter-spacing: 7px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    // align-items: center;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word; //文本换行
    overflow: hidden; //必须加
    white-space: normal;
    padding: 20px 20px;
    &.small {
        width: 430px;
    }
    &.big {
        width: 608px;
    }
    &.click-class {
        background: rgb(155, 212, 250);
    }
}
</style>